import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
import { connect } from 'react-redux'
import { tabAction } from '../../store/actionCreators'
import { withRouter } from 'react-router-dom'
import './index.css'
import Home from '../Home'
import My from '../My'

const mapStateToProps = (state) => ({
    tabState: state.tabState
})

const mapDispatchToProps = (dispatch) => ({
    changeTab: (tabState) => dispatch(tabAction(tabState))
})

class Tab extends Component {
    render() {
        return (
            <>
                <TabBar
                    unselectedTintColor='#ffffff'
                    tintColor="#096ee2"
                    barTintColor="#062f45"
                >
                    <TabBar.Item title="首页"
                        key="home"
                        icon={
                            <div className="icon homeUnselect"></div>
                        }
                        selectedIcon={
                            <div className="icon homeSelected"></div>
                        }
                        selected={this.props.tabState === 'home'}
                        onPress={() => {
                            this.props.changeTab('home')
                        }}
                    >
                        <Home />
                    </TabBar.Item>
                    <TabBar.Item
                        title="我的"
                        key="mine"
                        icon={
                            <div className="icon myUnselect"></div>
                        }
                        selectedIcon={
                            <div className="icon mySelected"></div>
                        }
                        selected={this.props.tabState === 'mine'}
                        onPress={() => {
                            this.props.changeTab('mine')
                        }}
                    >
                        <My />
                    </TabBar.Item>
                </TabBar>
            </>
        );
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Tab));